<template>  
    <div class="multi-select-box">  
      <div  
        v-for="option in options"  
        :key="option.value"  
        class="option"  
        :class="{ selected: isSelected(option) }"  
        @click="toggleSelection(option)"  
      >  
              <img src="./track.png" />
      
        <!-- <input  
          type="checkbox"  
          :value="option.value"  
          :checked="isSelected(option)"  
          @change="toggleSelection(option)"  
        />  -->
        <!-- <div class="box"
        :value="option.value"  
          :checked="isSelected(option)"  
          @change="toggleSelection(option)">
          
        </div>  -->
        <p>
        {{ option.title }}
  
        </p>
        <p>
          {{ option.label }}  
        </p>
      </div>  
    </div>  
  </template>  
  
  <script lang="ts" setup>  
  import { defineProps, ref, watch } from 'vue';  
  
  const props = defineProps({  
    options: {  
      type: Array,  
      required: true,  
    },  
    modelValue: {  
      type: Array,  
      default: () => [],  
    },  
  });  
  
  const emit = defineEmits(['update:modelValue']);  
  
  // eslint-disable-next-line vue/no-setup-props-destructure
  const selectedOptions = ref([...props.modelValue]);  
  
  const isSelected = (option) => {  
    return selectedOptions.value.includes(option.value);  
  };  
  
  const toggleSelection = (option) => {  
    const currentIndex = selectedOptions.value.indexOf(option.value);  
    if (currentIndex === -1) {  
      selectedOptions.value.push(option.value);  
    } else {  
      selectedOptions.value.splice(currentIndex, 1);  
    }  
    emit('update:modelValue', selectedOptions.value);  
  };  
  
  watch(  
    () => props.modelValue,  
    (newVal) => {  
      selectedOptions.value = [...newVal];  
    }  
  );  
  </script>  
  
  <style scoped>  
  .multi-select-box {  
    border: 1px solid #ccc;  
    padding: 10px;  
    border-radius: 5px;  
  }  
  .option {  
    cursor: pointer;  
    padding: 5px;  
    width: 300px;
    height: 300px;
    background-color: #f7f7f7;
    /* display: inline-block; */
    margin: 10px;
    display: flex; 
    flex-direction: column; 
    /* justify-content: center;  */
    align-items: center; 
    
  }  
  
  .option:hover {
                  background-color: #ecf1ff;
              }
  
  .option.selected {  
    background-color: #ecf1ff;  
  }  
  .box {
    width: 50px;
    height: 50px;
    background-color: pink
  }
  p {
    color:#4C5894;
    font-size:24px;
  }
  </style>